<template>
  <div class="Event">
    <div class="box">
      <p class="title">值班监控看板</p>
      <div class="btn">
        <el-icon color="#409EFC" :size="20" v-if="false"><Setting /></el-icon>
        <el-button @click="goChangeAndUpg"> 变更和升级查询</el-button>
        <el-button @click="freash" :disabled="isDisable" class="freash">刷新</el-button>
      </div>
    </div>
    <div class="emergency" v-if="rotate">
      <!--  -->
      <Emergency :changeTime="changeTime" @getemergency="getemergency"></Emergency>
    </div>
    <div class="main" :class="[rotate ? '' : 'existence']">
      <div class="mainTop">
        <div class="Operation">
          <p class="title">运维事件单</p>
          <operation :changeTime="changeTime" class="modular"></operation>
        </div>
        <!-- monitor -->
        <div class="monitor">
          <div class="nav">
            <p class="title">监控事件单</p>
            <!-- <el-tree-select
              ref="tree"
              v-model="value"
              :props="defaultProps"
              :data="data"
              default-expand-all
              @node-click="handleNodeClick"
            /> -->
            <el-select v-model="value" class="m-2" ref="treeSelect">
              <el-option :value="value" :label="value">
                <el-tree
                  ref="tree"
                  :data="data"
                  default-expand-all
                  :props="defaultProps"
                  check-strictly
                  @node-click="handleNodeClick"
                >
                </el-tree>
              </el-option>
            </el-select>
          </div>
          <!-- {{type}}-{{run}} -->
          <run_monitor
            :changeTime="changeTime"
            :type="type"
            class="modular"
            v-if="run"
          ></run_monitor>
          <fistLine
            :changeTime="changeTime"
            :type="type"
            class="modular"
            v-if="frontline"
          ></fistLine>
          <Application
            :changeTime="changeTime"
            :type="type"
            class="modular"
            v-if="apply"
          ></Application>
        </div>
      </div>
      <div class="mainBottom">
        <div class="Dispatch">
          <!-- <el-carousel trigger="click" :autoplay="false">
            <el-carousel-item> -->
          <div class="titleBox">
            <p class="title">批量调度-系统日终运行统计</p>
          </div>
          <Dispatch :changeTime="changeTime" class="modular"></Dispatch>
          <!-- </el-carousel-item>
            <el-carousel-item>
              <div class="titleBox">
                <p class="title">问题单</p>
              </div>
              <Problem :changeTime="changeTime" class="modular"></Problem>
            </el-carousel-item>
          </el-carousel> -->
        </div>
        <div class="resources">
          <!-- <el-carousel trigger="click" :autoplay="false">
            <el-carousel-item> -->
          <div class="titleBox">
            <p class="title">资源变更单</p>
            <p class="right">
              <span class="tips">当前时间：</span>
              <span>{{ yearTime }}年{{ getYearWeek(yearTime, months, dayTime) }}周</span>
            </p>
          </div>
          <resources :changeTime="changeTime" class="modular"></resources>
          <!-- </el-carousel-item>
            <el-carousel-item>
              <div class="titleBox">
                <p class="title">人行态势感知</p>
              </div>
              <Situational :changeTime="changeTime" class="modular"></Situational>
            </el-carousel-item>
          </el-carousel> -->
        </div>
        <!-- edition -->
        <div class="edition">
          <div class="titleBox">
            <p class="title">版本发布单</p>
            <p class="right">
              <span class="tips">当前时间：</span>
              <span>{{ yearTime }}年{{ getYearWeek(yearTime, months, dayTime) }}周</span>
            </p>
          </div>
          <Edition :changeTime="changeTime" class="modular"></Edition>
        </div>
      </div>
    </div>
    <el-carousel :autoplay="false" trigger="click" v-if="false">
      <el-carousel-item>
        <div class="box">
          <p class="title">值班监控看板</p>
          <div class="btn">
            <el-icon color="#409EFC" :size="20" v-if="false"><Setting /></el-icon>
            <el-button @click="goChangeAndUpg"> 变更和升级查询</el-button>
            <el-button @click="freash" :disabled="isDisable" class="freash">刷新</el-button>
          </div>
        </div>
        <div class="emergency" v-if="rotate">
          <Emergency :changeTime="changeTime" @getemergency="getemergency"></Emergency>
        </div>
        <div class="main" :class="[rotate ? '' : 'existence']">
          <div class="mainTop">
            <div class="Operation">
              <p class="title">运维事件单</p>
              <operation :changeTime="changeTime" class="modular"></operation>
            </div>
            <!-- monitor -->
            <div class="monitor">
              <div class="nav">
                <p class="title">监控事件单</p>
                <!-- <el-tree-select
              ref="tree"
              v-model="value"
              :props="defaultProps"
              :data="data"
              default-expand-all
              @node-click="handleNodeClick"
            /> -->
                <el-select v-model="value" class="m-2" ref="treeSelect">
                  <el-option :value="value" :label="value">
                    <el-tree
                      ref="tree"
                      :data="data"
                      default-expand-all
                      :props="defaultProps"
                      check-strictly
                      @node-click="handleNodeClick"
                    >
                    </el-tree>
                  </el-option>
                </el-select>
              </div>
              <run_monitor
                :changeTime="changeTime"
                :type="type"
                class="modular"
                v-if="run"
              ></run_monitor>
              <fistLine
                :changeTime="changeTime"
                :type="type"
                class="modular"
                v-if="frontline"
              ></fistLine>
              <Application
                :changeTime="changeTime"
                :type="type"
                class="modular"
                v-if="apply"
              ></Application>
            </div>
          </div>
          <div class="mainBottom">
            <div class="Dispatch">
              <p class="title">批量调度-系统日终运行统计</p>
              <Dispatch :changeTime="changeTime" class="modular"></Dispatch>
            </div>
            <div class="resources">
              <div class="titleBox">
                <p class="title">资源变更单</p>
                <p class="right">
                  <span class="tips">当前时间：</span>
                  <span>{{ yearTime }}年{{ getYearWeek(yearTime, months, dayTime) }}周</span>
                </p>
              </div>
              <resources :changeTime="changeTime" class="modular"></resources>
            </div>
            <!-- edition -->
            <div class="edition">
              <div class="titleBox">
                <p class="title">版本发布单</p>
                <p class="right">
                  <span class="tips">当前时间：</span>
                  <span>{{ yearTime }}年{{ getYearWeek(yearTime, months, dayTime) }}周</span>
                </p>
              </div>
              <Edition :changeTime="changeTime" class="modular"></Edition>
            </div>
          </div>
        </div>
      </el-carousel-item>
      <el-carousel-item>
        <Home></Home>
      </el-carousel-item>
    </el-carousel>
    <!-- <div class="box">
      <p class="title">值班监控看板</p>
      <div class="btn">
        <el-icon color="#409EFC" :size="20" v-if="false"><Setting /></el-icon>
        <el-button @click="goChangeAndUpg"> 变更和升级查询</el-button>
        <el-button @click="freash" :disabled="isDisable" class="freash">刷新</el-button>
      </div>
    </div>
    <div class="emergency" v-if="rotate">
      <Emergency :changeTime="changeTime" @getemergency="getemergency"></Emergency>
    </div>
    <div class="main" :class="[rotate ? '' : 'existence']">
      <div class="mainTop">
        <div class="Operation">
          <p class="title">运维事件单</p>
          <operation :changeTime="changeTime" class="modular"></operation>
        </div>
        <div class="monitor">
          <div class="nav">
            <p class="title">监控事件单</p>
            <el-select v-model="value" class="m-2" ref="treeSelect">
              <el-option :value="value" :label="value">
                <el-tree
                  ref="tree"
                  :data="data"
                  default-expand-all
                  :props="defaultProps"
                  check-strictly
                  @node-click="handleNodeClick"
                >
                </el-tree>
              </el-option>
            </el-select>
          </div>
          <run_monitor
            :changeTime="changeTime"
            :type="type"
            class="modular"
            v-if="run"
          ></run_monitor>
          <fistLine
            :changeTime="changeTime"
            :type="type"
            class="modular"
            v-if="frontline"
          ></fistLine>
          <Application
            :changeTime="changeTime"
            :type="type"
            class="modular"
            v-if="apply"
          ></Application>
        </div>
      </div>
      <div class="mainBottom">
        <div class="Dispatch">
          <p class="title">批量调度-系统日终运行统计</p>
          <Dispatch :changeTime="changeTime" class="modular"></Dispatch>
        </div>
        <div class="resources">
          <div class="titleBox">
            <p class="title">资源变更单</p>
            <p class="right">
              <span class="tips">当前时间：</span>
              <span>{{ yearTime }}年{{ getYearWeek(yearTime, months, dayTime) }}周</span>
            </p>
          </div>
          <resources :changeTime="changeTime" class="modular"></resources>
        </div>
        <div class="edition">
          <div class="titleBox">
            <p class="title">版本发布单</p>
            <p class="right">
              <span class="tips">当前时间：</span>
              <span>{{ yearTime }}年{{ getYearWeek(yearTime, months, dayTime) }}周</span>
            </p>
          </div>
          <Edition :changeTime="changeTime" class="modular"></Edition>
        </div>
      </div>
    </div> -->
    <el-dialog v-model="dialogVisible" title="Tips" width="30%">
      <!-- :before-close="handleClose" -->
      <span>This is a message</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogVisible = false"> Confirm </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
  import { ElMessage } from 'element-plus';
  import { ref, onMounted, onBeforeUnmount, reactive } from 'vue';
  import { useRouter } from 'vue-router';
  // import moment from 'moment';
  // import { ElMessage } from 'element-plus';
  import Emergency from './StateComponents/Emergency.vue';
  import Operation from './StateComponents/Operation.vue';
  // import monitor from './StateComponents/Monitor.vue';
  import run_monitor from './StateComponents/Run_kanban_Monitor.vue';
  import fistLine from './StateComponents/FirstLine_kanban.vue';
  import Application from './StateComponents/Application_kanban.vue';
  import Dispatch from './StateComponents/Dispatch.vue';
  import Resources from './StateComponents/Resources.vue';
  import Problem from './StateComponents/Problem.vue';
  import Situational from './StateComponents/Situational.vue';
  import Edition from './StateComponents/Edition.vue';
  import Home from './Home.vue';
  const router = useRouter();
  // const route = useRoute();
  const rotate = ref(true);
  const isDisable = ref(false);
  const changeTime = ref(new Date().getTime());
  let timer: any;
  // const time = ref();
  const yearTime = ref(new Date().getFullYear());
  const months = ref(new Date().getMonth() + 1);
  const dayTime = ref(new Date().getDate());
  const value = ref('运行看板');
  const tree = ref(null);
  const run = ref(true);
  const frontline = ref(false);
  const apply = ref(false);
  const defaultProps = {
    children: 'children',
    label: 'label'
  };
  // const load = ref(false);
  const treeSelect = ref(null);
  const data = [
    {
      value: '0',
      label: '运行看板'
    },
    // {
    //   value: '',
    //   label: '一线看板',
    //   children: [
    //     {
    //       value: '1',
    //       label: '总体'
    //     },
    //     {
    //       value: '11',
    //       label: '已转维'
    //     },
    //     {
    //       value: '12',
    //       label: '未转维'
    //     }
    //   ]
    // },
    {
      value: '2',
      label: '应用看板',
      children: [
        {
          value: '2',
          label: '总体'
        },
        {
          value: '21',
          label: '已转维'
        },
        {
          value: '22',
          label: '未转维'
        }
      ]
    }
  ];
  const type = ref('0');
  const dialogVisible = ref(false);
  onMounted(() => {
    // enterKeyup();
    timer = setInterval(() => {
      changeTime.value = new Date().getTime();
    }, 300000);
    getYearWeek(yearTime, months, dayTime);
  });
  const handleNodeClick = (data: Node, node) => {
    const path = reactive([]);
    // let parentLabel = node.parent.data.label;
    const parentLabel = ref('');
    // parentLabel.value = node;
    //当前选中节点
    path.push(data.label);
    //层级数超过1
    if (node.level > 1) {
      //变量上级父节点
      for (let i = 1; i < node.level; i++) {
        parentLabel.value = node.parent;
        if (parentLabel.value !== null && parentLabel.value !== undefined) {
          path.push(parentLabel.value.data.label);
        }
      }
      //反转
      path.reverse();
    }
    //回显
    value.value = path.join('/');
    type.value = data.value;
    switch (data.value) {
      case '0':
        run.value = true;
        // frontline.value = false;
        apply.value = false;
        treeSelect.value.visible = false;
        break;
      // case '1':
      //   run.value = false;
      //   // frontline.value = true;
      //   apply.value = false;
      //   treeSelect.value.visible = false;
      //   break;
      // case '11':
      //   run.value = false;
      //   // frontline.value = true;
      //   treeSelect.value.visible = false;
      //   apply.value = false;
      //   break;
      // case '12':
      //   run.value = false;
      //   // frontline.value = true;
      //   apply.value = false;
      //   treeSelect.value.visible = false;
      //   break;
      case '2':
        run.value = false;
        // frontline.value = false;
        apply.value = true;
        treeSelect.value.visible = false;
        break;
      case '21':
        run.value = false;
        // frontline.value = false;
        apply.value = true;
        treeSelect.value.visible = false;
        break;
      case '22':
        run.value = false;
        // frontline.value = false;
        apply.value = true;
        treeSelect.value.visible = false;
        break;

      default:
        break;
    }
    return value;
  };
  const getYearWeek = (a, b, c) => {
    const date1 = new Date(a, parseInt(b) - 1, c);
    const date2 = new Date(a, 0, 1);
    const d = Math.round((date1.valueOf() - date2.valueOf()) / 86400000);
    // const aaa = Math.ceil((d + (date2.getDay() + 1 - 1)) / 7);
    return Math.ceil((d + (date2.getDay() + 1 - 1)) / 7);
  };
  const getemergency = () => {
    rotate.value = false;
  };
  const goChangeAndUpg = () => {
    router.push({
      name: 'ChangeAndUpg'
    });
  };
  const freash = () => {
    changeTime.value = new Date().getTime();
    isDisable.value = true;
    ElMessage({
      showClose: true,
      message: '刷新成功',
      type: 'success'
    });
    setTimeout(() => {
      isDisable.value = false;
    }, 30000);
  };
  onBeforeUnmount(() => {
    clearInterval(timer);
  });
</script>
<style scoped lang="less">
  .Event {
    width: 100%;
    height: 100vh;//calc(100vh - 30px);
    background: rgb(235, 239, 245);
    // background: red;
    list-style: none;
    padding-top: 5px;
    box-sizing: border-box;
    .box {
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
      .title {
        font-size: 18px;
        font-weight: 400;
        color: #46545d;
        line-height: 34px;
        margin: 0;
        padding: 0;
      }
      .btn {
        display: flex;
        align-items: center;
        .el-icon {
          margin-right: 10px;
          cursor: pointer;
        }
        .el-button {
          background: #007af5;
          height: 34px;
          border: none;
          color: #fff;
          font-size: 12px;
          font-weight: 400;
          border-radius: 2px;
          // width: 120px;
          &.freash {
            margin-left: 10px;
            width: 80px;
          }
          &.is-disabled {
            opacity: 0.5;
          }
        }
      }
    }
    .emergency {
      height: 76px;
      margin-bottom: 10px;
      // box-sizing: border-box;
    }
    .main {
      height: calc(100% - 140px);
      //height:318px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .mainTop {
        display: flex;
        justify-content: space-between;
        height: 54.5%;
        .Operation {
          width: 41.5%;
          height: 100%;
          background: #ffffff;
          padding: 15px;
          box-sizing: border-box;
          border-radius: 6px;
          p {
            &.title {
              font-size: 14px;
              font-weight: bold;
              color: #46545d;
              height: 32px;
              line-height: 32px;
              margin: 0;
              padding: 0px;
            }
          }

          .modular {
            height: calc(100% - 32px);
            width: 100%;
            padding: 0;
          }
        }
        .monitor {
          width: 58%;
          height: 100%;
          background: #ffffff;
          border-radius: 6px;
          padding: 15px;
          box-sizing: border-box;
          .nav {
            height: 32px;
            display: flex;
            justify-content: space-between;
            // margin-bottom: 10px;
            .title {
              font-size: 14px;
              font-weight: bold;
              color: #46545d;
              height: 32px;
              line-height: 32px;
              margin: 0;
              padding: 0px;
            }
            :deep(.el-select) {
              width: 180px;
            }
          }

          .modular {
            height: calc(100% - 32px);
            width: 100%;
            padding: 0;
          }
        }
      }

      .mainBottom {
        display: flex;
        justify-content: space-between;
        height: 44.5%;
        .resources {
          // width: 36%;
          width: 29%;
          height: 100%;
          background: #ffffff;
          padding: 15px;
          box-sizing: border-box;
          border-radius: 6px;
           .titleBox {
                display: flex;
                justify-content: space-between;
                .title {
                  font-size: 16px;
                  font-weight: bold;
                  color: #46545d;
                  height: 32px;
                  line-height: 32px;
                  padding: 0;
                  margin: 0;
                }
                .right {
                  padding: 0;
                  margin: 0;
                  font-size: 14px;
                  font-weight: bold;
                  color: #46545d;
                  .tips {
                    font-size: 14px;
                    font-weight: 400;
                    color: #7b868d;
                  }
                }
              }
              .modular {
                height: calc(100% - 36px);
              }
          .el-carousel--horizontal {
            height: 100%;
            :deep(.el-carousel__container) {
              height: 100%;
              .titleBox {
                display: flex;
                justify-content: space-between;
                .title {
                  font-size: 16px;
                  font-weight: bold;
                  color: #46545d;
                  height: 32px;
                  line-height: 32px;
                  padding: 0;
                  margin: 0;
                }
                .right {
                  padding: 0;
                  margin: 0;
                  font-size: 14px;
                  font-weight: bold;
                  color: #46545d;
                  .tips {
                    font-size: 14px;
                    font-weight: 400;
                    color: #7b868d;
                  }
                }
              }
              .modular {
                height: calc(100% - 36px);
              }
            }
            :deep(.el-carousel__indicators) {
              bottom: 0;
              .el-carousel__button {
                background: #0079f5;
              }
            }
          }
        }
        .edition {
          width: 43%;
          height: 100%;
          background: #ffffff;
          padding: 15px;
          box-sizing: border-box;
          border-radius: 6px;
          .titleBox {
            display: flex;
            justify-content: space-between;
            .title {
              font-size: 16px;
              font-weight: bold;
              color: #46545d;
              height: 32px;
              line-height: 32px;
              padding: 0;
              margin: 0;
            }
            .right {
              padding: 0;
              margin: 0;
              font-size: 14px;
              font-weight: bold;
              color: #46545d;
              .tips {
                font-size: 14px;
                font-weight: 400;
                color: #7b868d;
              }
            }
          }
          .modular {
            height: calc(100% - 32px);
          }
        }

        .Dispatch {
          width: 27%;
          height: 100%;
          background: #ffffff;
          border-radius: 6px;
          padding: 15px;
          box-sizing: border-box;
          p {
            &.title {
              font-size: 16px;
              font-weight: bold;
              color: #46545d;
              height: 32px;
              line-height: 32px;
              margin: 0;
              padding: 0;
            }
          }

          .modular {
            height: calc(100% - 32px);
            width: 100%;
            padding: 0;
          }
        }
      }
      &.existence {
        height: calc(100% - 58px);
      }
    }
    .el-carousel {
      height: 100%;
      :deep(.el-carousel__container) {
        height: 100%;
        .el-carousel__item {
          height: 100%;
          .box {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            .title {
              font-size: 18px;
              font-weight: 400;
              color: #46545d;
              line-height: 34px;
              margin: 0;
              padding: 0;
            }
            .btn {
              display: flex;
              align-items: center;
              .el-icon {
                margin-right: 10px;
                cursor: pointer;
              }
              .el-button {
                background: #007af5;
                height: 34px;
                border: none;
                color: #fff;
                font-size: 12px;
                font-weight: 400;
                border-radius: 2px;
                // width: 120px;
                &.freash {
                  margin-left: 10px;
                  width: 80px;
                }
                &.is-disabled {
                  opacity: 0.5;
                }
              }
            }
          }
          .emergency {
            height: 76px;
            margin-bottom: 10px;
            // box-sizing: border-box;
          }
          .main {
            height: calc(100% - 150px);
            //height:318px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .mainTop {
              display: flex;
              justify-content: space-between;
              height: 54.5%;
              .Operation {
                width: 41.5%;
                height: 100%;
                background: #ffffff;
                padding: 15px;
                box-sizing: border-box;
                border-radius: 6px;
                p {
                  &.title {
                    font-size: 14px;
                    font-weight: bold;
                    color: #46545d;
                    height: 32px;
                    line-height: 32px;
                    margin: 0;
                    padding: 0px;
                  }
                }

                .modular {
                  height: calc(100% - 32px);
                  width: 100%;
                  padding: 0;
                }
              }
              .monitor {
                width: 58%;
                height: 100%;
                background: #ffffff;
                border-radius: 6px;
                padding: 15px;
                box-sizing: border-box;
                .nav {
                  height: 32px;
                  display: flex;
                  justify-content: space-between;
                  // margin-bottom: 10px;
                  .title {
                    font-size: 14px;
                    font-weight: bold;
                    color: #46545d;
                    height: 32px;
                    line-height: 32px;
                    margin: 0;
                    padding: 0px;
                  }
                  :deep(.el-select) {
                    width: 180px;
                  }
                }

                .modular {
                  height: calc(100% - 32px);
                  width: 100%;
                  padding: 0;
                }
              }
            }

            .mainBottom {
              display: flex;
              justify-content: space-between;
              height: 44.5%;
              .resources {
                // width: 36%;
                width: 29%;
                height: 100%;
                background: #ffffff;
                padding: 15px;
                box-sizing: border-box;
                border-radius: 6px;
                .titleBox {
                  display: flex;
                  justify-content: space-between;
                  .title {
                    font-size: 16px;
                    font-weight: bold;
                    color: #46545d;
                    height: 32px;
                    line-height: 32px;
                    padding: 0;
                    margin: 0;
                  }
                  .right {
                    padding: 0;
                    margin: 0;
                    font-size: 14px;
                    font-weight: bold;
                    color: #46545d;
                    .tips {
                      font-size: 14px;
                      font-weight: 400;
                      color: #7b868d;
                    }
                  }
                }
                .modular {
                  height: calc(100% - 36px);
                }
              }
              .edition {
                width: 43%;
                height: 100%;
                background: #ffffff;
                padding: 15px;
                box-sizing: border-box;
                border-radius: 6px;
                .titleBox {
                  display: flex;
                  justify-content: space-between;
                  .title {
                    font-size: 16px;
                    font-weight: bold;
                    color: #46545d;
                    height: 32px;
                    line-height: 32px;
                    padding: 0;
                    margin: 0;
                  }
                  .right {
                    padding: 0;
                    margin: 0;
                    font-size: 14px;
                    font-weight: bold;
                    color: #46545d;
                    .tips {
                      font-size: 14px;
                      font-weight: 400;
                      color: #7b868d;
                    }
                  }
                }
                .modular {
                  height: calc(100% - 32px);
                }
              }

              .Dispatch {
                width: 27%;
                height: 100%;
                background: #ffffff;
                border-radius: 6px;
                padding: 15px;
                box-sizing: border-box;
                p {
                  &.title {
                    font-size: 16px;
                    font-weight: bold;
                    color: #46545d;
                    height: 32px;
                    line-height: 32px;
                    margin: 0;
                    padding: 0;
                  }
                }

                .modular {
                  height: calc(100% - 32px);
                  width: 100%;
                  padding: 0;
                }
              }
            }
            &.existence {
              height: calc(100% - 58px);
            }
          }
        }
      }
      :deep(.el-carousel__indicators) {
        // bottom: -10px;
        .el-carousel__button {
          background: #0079f5;
        }
      }
    }
    /*  .box {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .title {
        font-size: 18px;
        font-weight: 400;
        color: #46545d;
        line-height: 34px;
        margin: 0;
        padding: 0;
      }
      .btn {
        display: flex;
        align-items: center;
        .el-icon {
          margin-right: 10px;
          cursor: pointer;
        }
        .el-button {
          background: #007af5;
          height: 34px;
          border: none;
          color: #fff;
          font-size: 12px;
          font-weight: 400;
          border-radius: 2px;
          // width: 120px;
          &.freash {
            margin-left: 10px;
            width: 80px;
          }
          &.is-disabled {
            opacity: 0.5;
          }
        }
      }
    }
    .emergency {
      height: 76px;
      margin-bottom: 10px;
      // box-sizing: border-box;
    }
    .main {
      height: calc(100% - 150px);
      //height:318px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .mainTop {
        display: flex;
        justify-content: space-between;
        height: 54.5%;
        .Operation {
          width: 41.5%;
          height: 100%;
          background: #ffffff;
          padding: 15px;
          box-sizing: border-box;
          border-radius: 6px;
          .title {
            font-size: 14px;
            font-weight: bold;
            color: #46545d;
            height: 32px;
            line-height: 32px;
            margin: 0;
            padding: 0px;
          }
          .modular {
            height: calc(100% - 32px);
            width: 100%;
            padding: 0;
          }
        }
        .monitor {
          width: 58%;
          height: 100%;
          background: #ffffff;
          border-radius: 6px;
          padding: 15px;
          box-sizing: border-box;
          .nav {
            height: 32px;
            display: flex;
            justify-content: space-between;
            // margin-bottom: 10px;
            .title {
              font-size: 14px;
              font-weight: bold;
              color: #46545d;
              height: 32px;
              line-height: 32px;
              margin: 0;
              padding: 0px;
            }
            :deep(.el-select) {
              width: 180px;
            }
          }

          .modular {
            height: calc(100% - 32px);
            width: 100%;
            padding: 0;
          }
        }
      }

      .mainBottom {
        display: flex;
        justify-content: space-between;
        height: 44.5%;
        .resources {
          // width: 36%;
          width: 29%;
          height: 100%;
          background: #ffffff;
          padding: 15px;
          box-sizing: border-box;
          border-radius: 6px;
          .titleBox {
            display: flex;
            justify-content: space-between;
            .title {
              font-size: 16px;
              font-weight: bold;
              color: #46545d;
              height: 32px;
              line-height: 32px;
              padding: 0;
              margin: 0;
            }
            .right {
              padding: 0;
              margin: 0;
              font-size: 14px;
              font-weight: bold;
              color: #46545d;
              .tips {
                font-size: 14px;
                font-weight: 400;
                color: #7b868d;
              }
            }
          }
          .modular {
            height: calc(100% - 36px);
          }
        }
        .edition {
          width: 43%;
          height: 100%;
          background: #ffffff;
          padding: 15px;
          box-sizing: border-box;
          border-radius: 6px;
          .titleBox {
            display: flex;
            justify-content: space-between;
            .title {
              font-size: 16px;
              font-weight: bold;
              color: #46545d;
              height: 32px;
              line-height: 32px;
              padding: 0;
              margin: 0;
            }
            .right {
              padding: 0;
              margin: 0;
              font-size: 14px;
              font-weight: bold;
              color: #46545d;
              .tips {
                font-size: 14px;
                font-weight: 400;
                color: #7b868d;
              }
            }
          }
          .modular {
            height: calc(100% - 32px);
          }
        }

        .Dispatch {
          width: 27%;
          height: 100%;
          background: #ffffff;
          border-radius: 6px;
          padding: 15px;
          box-sizing: border-box;

          .title {
            font-size: 16px;
            font-weight: bold;
            color: #46545d;
            height: 32px;
            line-height: 32px;
            margin: 0;
            padding: 0;
          }

          .modular {
            height: calc(100% - 32px);
            width: 100%;
            padding: 0;
          }
        }
      }
      &.existence {
        height: calc(100% - 58px);
      }
    } */
  }
  .el-select-dropdown__item {
    overflow: auto;
    height: auto;
  }
  .el-select-dropdown__item.hover {
    background: #fff;
  }
</style>
